<template>
	<view class="m-field custom-search x-f" :style="containerStyle" @tap="handleTap">
		<view class="search-label" :style="labelStyle">
			<slot name="custom-label">{{ label }}</slot>
		</view>
		<view class="search-value" :style="valueStyle">
			<slot name="custom-value">{{ value }}</slot>
		</view>
		<view class="Mine_Filed_Icon">
			<slot name="custom-icon">
				<uni-icons v-if="icon" :type="icon" color="#797979" size="20" />
			</slot>
		</view>
	</view>
</template>

<script setup lang="ts" name="m-field">
	import { computed } from 'vue'

	interface Props {
		label ?: string
		value ?: string | number | boolean | null
		labelWidth ?: string
		borderBottom ?: boolean
		backgroundColor ?: string
		labelAlign ?: string
		labelFontSize ?: number | string
		valueFontSize ?: number | string
		valueColor ?: string
		valueWeight ?: string
		paddings ?: string
		labelColor ?: string
		labelWeight ?: string
		overflow ?: string
		icon ?: string
	}

	const props = withDefaults(defineProps<Props>(), {
		label: '',
		value: null,
		labelWidth: 'fit-content',
		borderBottom: true,
		backgroundColor: 'transparent',
		labelAlign: 'left',
		labelFontSize: '14px',
		valueFontSize: '14px',
		valueColor: '#333',
		valueWeight: '400',
		paddings: '10px',
		labelColor: '#999',
		labelWeight: '400',
		overflow: 'ellipsis',
		icon: ''
	})

	const emit = defineEmits<{
		(e : 'click') : void
	}>()

	const containerStyle = computed(() => ({
		borderBottom: props.borderBottom ? '1px solid #ccc' : 'none',
		padding: props.paddings,
		backgroundColor: props.backgroundColor
	}))

	const labelStyle = computed(() => ({
		width: props.labelWidth,
		textAlign: props.labelAlign,
		fontSize: props.labelFontSize,
		color: props.labelColor,
		fontWeight: props.labelWeight
	}))

	const valueStyle = computed(() => ({
		fontSize: props.valueFontSize,
		color: props.valueColor,
		fontWeight: props.valueWeight,
		whiteSpace: props.overflow === 'wrap' ? 'normal' : 'nowrap'
	}))

	const handleTap = () => {
		emit('click')
	}
</script>

<style lang="scss">
	.custom-search {
		// @include flex(start, center)
	}

	.search-label {
		margin-right: 10px;
	}

	.search-value {
		flex: 1;
		overflow: hidden;
		overflow-x: auto;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>